<template>
    <TablePro v-bind="tableConfig" />
</template>

<script setup>

    import TablePro from '@/components/TablePro.vue';
    import { getGroupMember } from '@/apis/book';
    import { reactive } from 'vue';
    import { useRouter } from 'vue-router'
    import { timestampToDate } from '@/util/common'
    import { roleList } from '@/config/index'

    const router = useRouter()

    const tableConfig = reactive({
    // 传递方法
    apiData: () =>{
        return getGroupMember(router.currentRoute._value.params.groupId)
    },
    fields: { user_id: 'QQ',nickname:'昵称', card: '群名片', sex: '性别', age: '年龄',area:'地区',join_time:'加入时间',last_sent_time:'最后发言时间',level:'成员等级',role:'角色',title:'专属头衔',title_expire_time:'头衔过期时间',unfriendly:'是否不良记录成员',card_changeable:'是否允许修改群名片',shut_up_timestamp:'禁言到期时间'},
    custom: {
        join_time: {
            label: (scope) => {
                return timestampToDate(scope.row.join_time);
            },
        },
        last_sent_time: {
            label: (scope) => {
                return timestampToDate(scope.row.last_sent_time);
            },
        },
        title_expire_time: {
            label: (scope) => {
                return timestampToDate(scope.row.title_expire_time);
            },
        },
        shut_up_timestamp: {
            label: (scope) => {
                return timestampToDate(scope.row.shut_up_timestamp);
            },
        },
        unfriendly:{
            label: (scope) => {
                return scope.row.unfriendly == 1 ? '是' : '否';
            },
        },
        card_changeable:{
            label: (scope) => {
                return scope.row.card_changeable == 1 ? '是' : '否';
            },
        },
        role:{
            label : (scope) => {
                return roleList?.[scope.row.role] ?  roleList[scope.row.role] :  '-'
            },
            type:'tag'
        }
    }
})
</script>